<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shared Interests</title>
<style>
#login-greeting, #login-button {
    display: inline;
}
</style>
<script type="text/javascript" src="./javascript/util.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
var debug = true;
var perms = 'user_likes, friends_likes';
var loaded = {
        'fb' : false,
        'jquery' : false
};

var userInfo = {
    'name' : ""
};

function isLoaded(){
    //check status
    if(loaded.fb && loaded.jquery){
        return true;
    }
    return false;
}

/* jQuery Start Point */
$(document).ready(function(){
    trace('jquery start point');
    loaded.jquery = true;
    initPage('from jQuery');
});



/* Page Init Start Point */
function initPage(response){
    trace('initPage');
    trace(response);
    if(isLoaded()){
        trace('initPage go');
        FB.getLoginStatus(renderLogin);
    }
}

function onStatusChangeHandler(response){
    trace('onStatusChangeHandler');
    trace(response);
    renderLogin(response);
}

function onSessionChangeHandler(response){
    trace('onSessionChangeHandler');
    trace(response);
}

function renderLogin(response){
    trace('renderLogin');
    trace(response);
    if(response.session){
        //show logout button
        trace('logged in');
        showLogoutItems();
    }else{
        //show login button
        trace('not logged in')
        showLoginItems();
    }
}

function showLoginItems(){
    //create button
    var loginBtn = $("<input type='button' value='login'/>").click(function(){
        FB.login("", {scope: 'user_likes, friends_likes'});
    });

    //show message
    $('#login-greeting').text("not logged in");
    
    //append button
    $('#login-button').empty().append(loginBtn);
}

function showLogoutItems(){

    //get user info
    FB.api('/me', function(response){
        userInfo.name = response.name
        $('#login-greeting').text("Welcome, " + userInfo.name);
    });

    //create logout button
    var logoutBtn = $("<input type='button' value='logout'/>").click(function(){
        FB.logout();
    });

    //append logout button
    $('#login-button').empty().append(logoutBtn);
}

</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
/* fb jssdk Start Point */
window.fbAsyncInit = function(){

    trace('fb start point')
    loaded.fb = true;
    FB.init(
        {
            appId: 'b3129823ca04e8a35f3a380ec6c0f68b'
            , status: true
            , cookie: true
            , xfbml: false
        }
    );
    
    FB.Event.subscribe('auth.statusChange', onStatusChangeHandler);
    FB.Event.subscribe('auth.sessionChange', onSessionChangeHandler);
    
    FB.Event.subscribe('fb.log', trace);

    initPage('from fbsdk');
};
</script>

<div id="login">
    <div id="login-greeting"></div>
    <div id="login-button"></div>
</div>
<div id="contents">
</div>
</body>
</html>